<template>
  <div class="choose" v-if="detail">
    <!-- 头部 -->
    <div class="maoyan">
      <div class="maoyan-l" @click="$router.back()">
        <img src="../assets/返回.png" alt="" />
      </div>
      <div class="maoyan-c">{{ $route.query.cinema }}</div>
      <div class="maoyan-r">
        <img src="../assets/分享白.png" alt="" />
      </div>
    </div>

    <section class="seats">
      <!-- 厅号 -->
      <div
        class="mubu"
        :style="{
          left: (detail.seat.regions[0].columnSize / 2) * 34 + 'px',
        }"
      >
        {{ $route.query.plist.th }}
      </div>
      <!-- 座位行数 -->
      <div class="zhongxian">
        <div v-for="(row, i) in detail.seat.regions[0].rows" :key="row.rowId">
          {{ i + 1 }}
        </div>
      </div>

      <!-- 座位 -->
      <ul class="rows">
        <li
          class="row"
          v-for="row in detail.seat.regions[0].rows"
          :key="row.rowId"
        >
          <ul class="cols">
            <li class="col" v-for="(seat, index) in row.seats" :key="index">
              <!-- {{ seat.seatStatus }} -->

              <img
                v-if="seat.seatStatus == 1 && !selectedSeats.includes(seat)"
                :src="detail.seat.image.seatLegends[0].legendIcon"
                alt=""
                @click="selectSeat(seat)"
              />
              <img
                v-else-if="seat.seatStatus == 1 && selectedSeats.includes(seat)"
                :src="detail.seat.image.selectedImages[0]"
                alt=""
                @click="selectSeat(seat)"
              />
              <img
                v-else-if="seat.seatStatus == 3"
                :src="detail.seat.image.seatLegends[1].legendIcon"
                alt=""
              />
              <img
                v-else-if="seat.seatStatus == 4"
                :src="detail.seat.image.seatLegends[2].legendIcon"
                alt=""
              />
              <span v-else></span>
            </li>
          </ul>
        </li>
      </ul>

      <!-- 座位情况 -->
      <div class="seatLegends">
        <div v-for="n in seatLegends" :key="n.legendType">
          <img :src="n.legendIcon" alt="" />
          <span>{{ n.legendName }}</span>
        </div>
      </div>
    </section>

    <!-- 影片数据 -->
    <div class="session">
      <div class="session-t" v-for="(n, i) in detail.reminder.notice" :key="i">
        <img :src="n.imgUrl" alt="" />
        <span>{{ n.detail }}</span>
      </div>
      <div class="session-z">
        <div class="session-z-t">
          <div class="name">{{ $route.query.movieNm }}</div>
          <div class="btns" v-show="selectedSeats.length == 0">
            <div class="cbtn" v-if="!plistss" @click="plistss = true">
              切换场次<i class="x"></i>
            </div>
            <div class="cbtn" v-else @click="plistss = false">
              收起场次<i class="s"></i>
            </div>
          </div>
        </div>
        <div class="session-z-b">
          {{ plist.dt  }} {{ plist.tm }} {{ plist.lang }}{{ plist.tp }}
        </div>
      </div>

      <!-- 电影场次 -->
      <div class="plists" v-if="plistss" v-show="selectedSeats.length == 0">
        <ul>
          <li
            v-for="(n, i) in $route.query.plists"
            :key="i"
            @click="alterplist(n)"
          >
            <p>{{ n.tm }}</p>
            <div>{{ n.lang }}{{ n.tp }}</div>
            <p>{{ n.baseSellPrice }}元</p>
          </li>
        </ul>
      </div>

      <!-- 购票座位 -->
      <div class="seat" v-if="selectedSeats.length > 0">
        <div class="seat-item" v-for="(n, i) in selectedSeats" :key="i">
          <div class="item-l">
            <p>{{ n.rowId }}排{{ n.columnId }}座</p>
            <p>{{ plist.baseSellPrice }}元</p>
          </div>
          <div class="item-r" @click="delie(i)">X</div>
        </div>
      </div>
    </div>

    <!-- 确定订单付款 -->
    <div class="payment" v-if="payment">
      <div class="payment-movie">
        <div class="movie-name">
          <div class="name">{{ $route.query.movieNm }}</div>
          <div class="jia">{{ selectedSeats.length }}张 原价￥{{ nums }}</div>
        </div>
        <div class="time">
          {{ plist.dt  }} {{ plist.tm }} {{ plist.lang }}{{ plist.tp }}
        </div>
        <div class="dizhi">{{ $route.query.cinema }}</div>
        <div class="movie-seat">
          <span>{{ $route.query.plist.th }}</span>
          <div class="m-seats">
            <span v-for="(n, i) in selectedSeats" :key="i"
              >{{ n.rowId }}排{{ n.columnId }}座</span
            >
          </div>
        </div>
      </div>
      <div class="money">
        <div class="money-l">
          合计: ￥<span>{{ nums }}</span
          >元
        </div>
        <div class="money-r" @click="comfrimOrder">确认支付</div>
      </div>
    </div>

    <div class="pi"></div>

    <!-- 选座确定 -->
    <div class="fees">
      <div class="fees-t" disabled v-if="!selectedSeats.length">请先选座</div>
      <div class="fees-y" v-else @click="payment = true">
        {{ nums }}元 确定订单
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  computed: {
    ...mapState(["data"]),
  },
  data: function () {
    return {
      detail: null, // 主题数据
      selectedSeats: [], // 选座数据
      seatLegends: [], // 座位情况
      plist: null, // 影片数据
      nums: 0, // 选座金额
      plistss: false, // 显示多场电影厅
      payment: false, // 显示出现付款
    };
  },
  created: function () {
    this.axios
      .get("https://apis.netstart.cn/maoyan/cinema/seat-m.json")
      .then((res) => {
        this.detail = res.data.data;
        this.seatLegends = res.data.data.seat.image.seatLegends;
        this.plist = this.$route.query.plist;
        console.log(this.detail, this.data);
      });
  },
  methods: {
    // 点击选座
    selectSeat: function (seat) {
      //   console.log(seat);
      var isSelected = this.selectedSeats.includes(seat);
      if (isSelected) {
        this.selectedSeats = this.selectedSeats.filter(
          (o) => o.seatNo !== seat.seatNo
        );
      } else {
        // 添加选中座位
        this.selectedSeats.push(seat);
      }
    },
    // 添加到订票记录
    comfrimOrder: function () {
      var order = {
        cinema: {
          cinemaName: this.$route.query.cinema,
        },
        hall: {
          hallName: this.$route.query.plist.th,
        },
        movie: {
          img: this.$route.query.img,
          movieId: this.$route.query.movieId,
          movieName: this.$route.query.movieNm,
        },
        selectedSeats: this.selectedSeats,
        money: this.nums,
        plist: this.plist,
      };
      console.log(order);
      this.payment = false;
      this.$store.state.data.push(order);
    },
    // 取消选座
    delie: function (i) {
      this.selectedSeats.splice(i, 1);
    },
    // 点击选定场次
    alterplist: function (n) {
      this.plist = n;
    },
  },
  watch: {
    // 监听选座变化
    selectedSeats: function () {
      // 计算金额
      this.nums = this.plist.baseSellPrice * this.selectedSeats.length;
    },
    // 本地储存购买的电影订单
    data: function (n) {
      window.localStorage.setItem("data", JSON.stringify(n));
    },
  },
};
</script>

<style lang="less" scoped>
.choose {
  background: #f6f6f6;
  .maoyan {
    padding: 6px;
    background-color: #f1eff0;
    height: 38px;
    width: 363px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .maoyan-l {
      width: 50px;
      height: 38px;
      display: flex;
      align-items: center;
      img {
        width: 24px;
        height: 24px;
      }
    }

    .maoyan-c {
      font-size: 18px;
      color: black;
      width: 263px;
      height: 38px;
      text-align: center;
      line-height: 38px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }

    .maoyan-r {
      width: 50px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      img {
        width: 24px;
        height: 24px;
        margin-right: 5px;
      }
    }
  }

  .seats {
    position: relative;
    padding-top: 50px;
    overflow-x: auto;
    overflow-y: hidden;
    background: #f0f0f0;
    // 以滚动形式展示
    overflow: scroll;
    // margin-bottom: 10px;
    // 取消滚动条
    &::-webkit-scrollbar {
      display: none;
    }

    .mubu {
      width: 200px;
      margin-left: -100px;
      position: absolute;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      top: 0;
    }
    .zhongxian {
      position: absolute;
      left: 5px;
      background: #a9a7a8;
      padding: 0 3px;
      border-radius: 15px;
      opacity: 0.6;
      div {
        color: white;
        height: 24px;
        font-size: 12px;
        margin: 10px 0;
      }
    }

    .cols {
      display: flex;
      li {
        padding: 5px;
        flex-shrink: 0;
        flex-grow: 0;
        img {
          width: 24px;
          height: 24px;
          vertical-align: middle;
        }
        span {
          display: block;
          width: 24px;
          height: 24px;
        }
      }
    }

    .seatLegends {
      display: flex;
      justify-content: space-around;
      margin-top: 40px;
      padding-bottom: 5px;
      div {
        display: flex;
        align-items: center;
        img {
          width: 24px;
          height: 24px;
          margin-right: 5px;
        }
      }
    }
  }

  .session {
    margin: 5px 15px;
    padding: 10px 10px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 1px rgb(221, 219, 219);

    .session-t {
      display: flex;
      padding-bottom: 8px;
      border-bottom: 1px solid rgb(233, 230, 230);
      img {
        width: 15px;
        height: 15px;
        margin-right: 4px;
      }
      span {
        font-size: 12px;
        color: coral;
      }
    }
    .session-z {
      margin-top: 12px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgb(233, 230, 230);
      .session-z-t {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .name {
          font-size: 15px;
          font-weight: 600;
        }

        .btns {
          .cbtn {
            color: blue;
            font-size: 13px;
            display: flex;
            align-items: center;
            i {
              display: inline-block;
              width: 15px;
              height: 13px;
              margin-top: 3px;
            }
            .x {
              background: url(../assets/向下1.png) no-repeat;
              background-size: 100% 100%;
            }
            .s {
              background: url(../assets/向上1.png) no-repeat;
              background-size: 100% 100%;
            }
          }
        }
      }
      .session-z-b {
        margin-top: 8px;
        font-size: 13px;
        color: #636363;
      }
    }
    .plists {
      margin: 10px 0;
      ul {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        // 以滚动形式展示
        overflow: scroll;
        // margin-bottom: 10px;
        // 取消滚动条
        &::-webkit-scrollbar {
          display: none;
        }
        li {
          padding: 5px 20px;
          margin-right: 10px;
          font-size: 13px;
          background: #fef6f4;
          flex-shrink: 0;
          flex-grow: 0;
          border-radius: 5px;
          text-align: center;
          p {
            color: #636363;
          }
          div {
            color: #c4c1c2;
            margin: 3px 0;
          }
        }
      }
    }
    .seat {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      margin-top: 12px;
      .seat-item {
        display: flex;
        align-items: center;
        background: #c4c1c2;
        border-radius: 5px;
        padding: 7px 10px;
        font-size: 13px;
        margin-bottom: 7px;
        margin-right: 20px;
        .item-l {
          p {
            margin-bottom: 2px;
          }
        }
        .item-r {
          margin-left: 7px;
        }
      }
    }
  }

  .fees {
    margin: 10px 15px;
    position: fixed;
    bottom: 0;
    left: 0;
    div {
      height: 50px;
      width: 345px;
      text-align: center;
      line-height: 50px;
      border-radius: 25px;
      background: rgb(255, 115, 0);
    }
    .fees-t {
      color: #cecbcc;
    }
    .fees-y {
      color: #f0f0f0;
    }
  }

  .payment {
    width: 280px;
    position: fixed;
    z-index: 24;
    top: 35%;
    left: 11%;
    background: #fff;
    border-radius: 10px;
    box-shadow: 2px 2px 2px #f1eff0;
    padding: 10px;
    .payment-movie {
      .movie-name {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        .name {
          font-size: 15px;
          font-weight: 600;
        }
        .jia {
          font-size: 13px;
        }
      }
      .time {
        font-size: 12px;
        font-weight: 600;
      }
      .dizhi {
        font-size: 13px;
      }
      .movie-seat {
        span {
          font-size: 12px;
          margin-right: 5px;
        }
        .m-seats {
          display: inline-block;
        }
      }
    }
    .money {
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .money-l {
        font-size: 13px;
        margin-right: 10px;
        span {
          font-size: 15px;
          font-weight: 600;
          color: red;
        }
      }
      .money-r {
        height: 25px;
        font-size: 13px;
        line-height: 25px;
        color: #fff;
        background: red;
        padding: 5px 8px;
        text-align: center;
        border-radius: 15px;
      }
    }
  }

  .pi {
    padding-bottom: 70px;
  }
}
</style>